import 'package:flutter/material.dart';
import '../services/theme_service.dart';

class ThemeSettingsPage extends StatefulWidget {
  final ThemeMode currentThemeMode;
  final ValueChanged<ThemeMode> onThemeModeChanged;
  final Color currentPrimaryColor;
  final ValueChanged<Color> onPrimaryColorChanged;

  const ThemeSettingsPage({
    super.key,
    required this.currentThemeMode,
    required this.onThemeModeChanged,
    required this.currentPrimaryColor,
    required this.onPrimaryColorChanged,
  });

  @override
  State<ThemeSettingsPage> createState() => _ThemeSettingsPageState();
}

class _ThemeSettingsPageState extends State<ThemeSettingsPage> {
  late ThemeMode _selectedThemeMode;
  late Color _selectedPrimaryColor;

  @override
  void initState() {
    super.initState();
    _selectedThemeMode = widget.currentThemeMode;
    _selectedPrimaryColor = widget.currentPrimaryColor;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('主题设置'),
      ),
      body: ListView(
        children: [
          _buildThemeModeSection(),
          const Divider(),
          _buildColorSection(),
        ],
      ),
    );
  }

  Widget _buildThemeModeSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Padding(
          padding: EdgeInsets.all(16),
          child: Text(
            '主题模式',
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        RadioListTile<ThemeMode>(
          title: const Text('跟随系统'),
          value: ThemeMode.system,
          groupValue: _selectedThemeMode,
          onChanged: _handleThemeModeChanged,
        ),
        RadioListTile<ThemeMode>(
          title: const Text('浅色'),
          value: ThemeMode.light,
          groupValue: _selectedThemeMode,
          onChanged: _handleThemeModeChanged,
        ),
        RadioListTile<ThemeMode>(
          title: const Text('深色'),
          value: ThemeMode.dark,
          groupValue: _selectedThemeMode,
          onChanged: _handleThemeModeChanged,
        ),
      ],
    );
  }

  Widget _buildColorSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Padding(
          padding: EdgeInsets.all(16),
          child: Text(
            '主题颜色',
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: Wrap(
            spacing: 8,
            runSpacing: 8,
            children: [
              ...ThemeService.predefinedColors.map((color) => _buildColorItem(color)),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildColorItem(Color color) {
    final isSelected = _selectedPrimaryColor.value == color.value;
    return InkWell(
      onTap: () => _handleColorChanged(color),
      child: Container(
        width: 48,
        height: 48,
        decoration: BoxDecoration(
          color: color,
          shape: BoxShape.circle,
          border: Border.all(
            color: isSelected ? Colors.white : Colors.transparent,
            width: 2,
          ),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.1),
              blurRadius: 4,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        child: isSelected
            ? const Icon(
                Icons.check,
                color: Colors.white,
              )
            : null,
      ),
    );
  }

  void _handleThemeModeChanged(ThemeMode? mode) {
    if (mode != null) {
      setState(() {
        _selectedThemeMode = mode;
      });
      widget.onThemeModeChanged(mode);
    }
  }

  void _handleColorChanged(Color color) {
    setState(() {
      _selectedPrimaryColor = color;
    });
    widget.onPrimaryColorChanged(color);
  }
} 